<template>
  <div class="container flex-center flex-column flex-align-items-center">
    <div class="container-top flex-between">
      <div class="container-top-left flex">
        <img src="@/assets/logo-light.png">
        <span class="line"></span>
        <p class="font-18">通行证</p>
      </div>
      <div class="container-top-right flex">
        <p class="font-14">已有账号， <span class="font-14 pointer" @click="toPath('/login')">马上登录</span></p>
        <span class="line"></span>
        <p class="font-14"><span class="font-14 pointer" @click="toPath('/')">返回Fatohot</span></p>
      </div>
    </div>

    <div class="container-main">
      <div class="title font-24">账号安全</div>
      <div class="form">
        <template v-if="form.step === 1">
          <div class="form-mobile flex">
            <p class="font-16">+86</p>
            <input type="text" v-model="form.mobile" maxlength="16" placeholder="手机号" class="font-14" />
          </div>
          <div class="form-code flex-between">
            <input type="text" v-model="form.code" maxlength="8" placeholder="验证码" class="font-14" />
            <p class="font-14">发送验证码</p>
          </div>
          <div class="submit-btn font-20-B pointer" :class="{ active: form.mobile && form.code }" @click="nextStep">下一步
          </div>
        </template>
        <template v-if="form.step === 2">
          <div class="form-title font-20">修改密码</div>
          <input v-model="form.pwd" type="password" placeholder="设置密码" maxlength="24" class="form-pwd-input">
          <input v-model="form.pwd1" type="password" placeholder="确认密码" maxlength="24" class="form-pwd-input">
          <div class="submit-btn font-20-B pointer" :class="{ active: form.pwd && form.pwd1 }">最后一步</div>
        </template>
      </div>
    </div>

    <div class="container-bottom">
      <p class="font-12">©2017-2020版权所有 杭州凡兔网络科技有限公司</p>
      <p class="font-12">商务合作请联系邮箱: ouyang@wotokol.com 或QQ:1704476075</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const form = ref({
  mobile: '',
  code: '',
  pwd: '',
  pwd1: '',
  step: 1
});

const toPath = path => {
  router.push(path);
}
const nextStep = () => {
  form.value.step = 2;
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-image: url(@/assets/bg-login.jpg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;

  .container-top {
    width: 800px;
    margin-bottom: 32px;

    .container-top-left {
      align-items: end;

      img {
        width: 155px;
      }

      .line {
        width: 2px;
        height: 20px;
        background-color: #fff;
        margin: 0 10px;
      }

      p {
        color: #fff;
      }
    }

    .container-top-right {
      align-items: end;

      p {
        color: #fff;

        span {
          color: #f09444;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #fff;
        margin: 0 24px;
        position: relative;
        bottom: 2px;
      }
    }
  }

  .container-main {
    margin-bottom: 40px;
    width: 800px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;

    .title {
      height: 76px;
      text-align: center;
      line-height: 76px;
      background: @main-color;
      color: #fff;
    }

    .form {
      margin: 0 auto;
      padding: 40px 0 60px;
      width: 336px;
    }

    .form-mobile {
      height: 42px;
      margin-bottom: 20px;
      border-radius: 4px;
      overflow: hidden;

      p {
        width: 58px;
        background: @main-color;
        color: #fff;
        text-align: center;
        line-height: 42px;
      }

      input {
        width: 278px;
        padding: 0 32px;
        border: none;
        outline: none;
        background: #f4f4f4;
      }
    }

    .form-code {
      margin-bottom: 20px;
      height: 42px;

      input {
        outline: none;
        width: 220px;
        border-radius: 4px;
        background: #f4f4f4;
        outline: none;
        border: none;
        text-align: center;
      }

      p {
        width: 100px;
        border-radius: 4px;
        background: @main-color;
        color: #fff;
        text-align: center;
        line-height: 42px;
      }
    }

    .form-pwd-input {
      width: 100%;
      height: 42px;
      outline: none;
      border-radius: 4px;
      background: #f4f4f4;
      padding: 0 42px;
      margin-bottom: 20px;
      outline: none;
      border: none;
    }

    .form-title {
      text-align: center;
      color: #333;
      margin-bottom: 32px;
    }

    .submit-btn {
      height: 42px;
      margin-bottom: 32px;
      border-radius: 4px;
      letter-spacing: 4px;
      background: #f4f4f4;
      color: #bbb;
      transition: all .32s;
      text-align: center;
      line-height: 42px;

      &.active {
        background: @main-color;
        color: #fff;
        transition: all .32s;
      }
    }
  }

  .container-bottom {
    text-align: center;

    p {
      color: #fff;

      &:first-child {
        margin-bottom: 12px;
      }
    }
  }
}
</style>
